<template>
  <div>
    <Header/>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,inde) in banner" :key="inde">
        <img :src="item">
      </van-swipe-item>
    </van-swipe>
    <div class="mid">
      <div class="top">
        <img src="/index/top.jpg">
      </div>
      <div class="top1">
        <img src="/index/top1.jpg">
      </div>
      <div class="bottom">
        <img src="/index/bottom.jpg">
      </div>
    </div>
    <div class="bottom1">
      <img src="/index/bottom1.jpg">
    </div>
    <van-swipe class="myswipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,inde) in bannertwo" :key="inde">
        <img :src="item">
      </van-swipe-item>
    </van-swipe>
    <div class="product" v-for="item in types" :key="item.tid">
      <img :src="JSON.parse(item.pictop)" @click="goProducts(item.tid)">
      <img :src="JSON.parse(item.picmid)" @click="goProducts(item.tid)">
    </div>
    <Footer/>
  </div>
</template>
<script>
import Footer from '../components/Footer.vue';
import Header from "../components/Header.vue";
export default {
  components: { Header, Footer },
  data() {
    return {
      banner:[],
      bannertwo:[],
      types:[]
    }
  },
  updated () {
    this.getTypes()
  },
  mounted () {
    this.getIndex()
    // this.getTypes()
  },
  methods: {
    getIndex() {
      this.axios.get('/index/index').then(res=>{
        // console.log(res);
        let data=res.data.data
        // console.log(JSON.parse(this.data.banner));
        this.banner=JSON.parse(data.banner)
        this.bannertwo=JSON.parse(data.bannertwo)
      })
    },
    getTypes(){
      this.types=this.$store.state.Types
    },
    goProducts(tid){
      this.$router.push('/products')
      this.$store.commit('getTid',tid)
    }
  },
};
</script>
<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
.my-swipe {
  margin-top: 52px;
  .van-swipe-item{
    img{
      width: 100%;
    }
  }
}
.mid{
  img{
    width: 100%;
  }
}
.bottom1{
  margin-top:30px;
  img{
    width: 100%;
  }
}
.myswipe{
  .van-swipe-item{
    text-align: center;
    background-color: #C14242;
    img{
      margin-top:1%;
      width:70%;
      height:70%;
    }
  }
}
.product{
  img{
    width: 100%;
    display: block;
  }
  div{
    // display: flex;
    img{
      width:100%;
    }
  }
}
</style>
